<template>
	<view>
		<!-- 医技预约 查询当前有哪些检查检验项目 -->
		<!-- 顶部用户信息卡 -->
		<UserInfoCardVue></UserInfoCardVue>
		<!-- Tab栏 -->
		<Tabs :activeTab="activeTab" :tab-list="tabList" @change-tab="changeTab" />
		<view class="queue-query-page">
			<!-- 未预约卡片 -->
			<NoBook v-if="activeTab === 'noBook'"></NoBook>

			<!-- 已预约卡片 -->
			<Booked v-if="activeTab === 'booked'"></Booked>
		</view>
	</view>
</template>

<script>
	import Tabs from './components/tabs.vue';
	import NoBook from './components/Technology/noBook.vue';
	import Booked from './components/Technology/booked.vue';
	import UserInfoCardVue from '../../../components/UserInfo/UserInfoCard.vue';

	export default {
		components: {
			UserInfoCardVue,
			Tabs,
			NoBook,
			Booked
		},
		data() {
			return {

				tabList: [{
						label: '可预约',
						value: 'noBook'
					},
					{
						label: '已预约',
						value: 'booked'
					},
				],
				activeTab: 'noBook',
				noBooksInfo: [{
					project: 'MRI',
					detail: '颅脑核磁共振成像（MRI）',
					isbook: false
				}, ],
				bookedsInfo: [{
					project: 'MRI',
					detail: '颅脑核磁共振成像（MRI）',
					isbook: true,
					campus: '雅安市人民医院大兴院区',
					room: '二检查室',
					time: '2024-09-12 11：00：00'
				}, ],
			};
		},
		methods: {
			changeTab(tab) {
				this.activeTab = tab;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.queue-query-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		// padding: 25rpx 20rpx 40rpx;
	}
</style>